<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { useCircleTabs, useCircleList } from '@/simba/hooks/circle'
	
	// import SimbaTabs from '../components/SimbaTabs/SimbaTabs.vue';
	const { circleTabs, circleTabRef, keyword } = useCircleTabs()
	
	// import SimbaCircleList from '../components/SimbaCircleList/SimbaCircleList.vue'
	import type { ITabsItem } from '@/simba/types';
	const { circleList, onGetCircleDataHandler, onRecommendHandler, onFollowHandler } = useCircleList()
	const loadStatus = ref('loadmore')
	
	// import { SimbaCircleListInstance } from '@/types/component';
	// const locationTabRef = ref<SimbaCircleListInstance>()
	
	onLoad(async()=>{
		await Promise.all([
			onGetCircleDataHandler()
		])
	})
	function onTabsClickHandler(item: ITabsItem) {
		uni.showToast({
			icon: 'none',
			title: item.id + '--' + item.name
		})
	}
	const isTriggered = ref(false)
	const isLoading = ref(false)
	const onRefresherRefresh = async () => {
	  console.log('onRefresherRefresh')
	  isTriggered.value = true

	  // guessRef.value?.resetData()
	  // isLoading.value = true
	  // await Promise.all([
	  //   getHomeBannerData(),
	  //   getHomeCategoryData(),
	  //   getHomeHotData(),
	  //   guessRef.value.getGuessMore(),
	  // ])
	  isLoading.value = false
	  isTriggered.value = false
	  // guessRef.value.getGuessMore()
	}
	const onScrollToLower = () => {
	    console.log('滚动到底了')
	    // if (!isLoading.value) {
	    // guessRef.value.getGuessMore()
	}
</script>

<template>
<!-- 	<s-layout
	  title="植物"
	  navbar="custom"
	  tabbar="/pages/index/plant"
	  :showTabbar="false"
	  onShareAppMessage
	> -->
	<scroll-view class="viewport"
		scroll-y
		enable-flex="true"
		:refresher-enabled="true"
		:refresher-triggered="isTriggered"
		@refresherrefresh="onRefresherRefresh"
		@scrolltolower="onScrollToLower"
		>
		<view class="container">
		<!-- <view class="circleHead"> -->
			<siTabs ref="circleTabRef" 
				:list="circleTabs.list" 
				:choosedTab="circleTabs.choosedTab"
				@onTabsClick="onTabsClickHandler"
			>
				<template #content>
					<up-search placeholder="请输入关键词" v-model="keyword" :clearabled="true" ></up-search>
				</template>
			</siTabs>
		<!-- </view> -->
		<view v-if="circleTabRef?.choosedTab.name === '推荐'">
			<siCircleList class="plant-list" :list="circleList">
				<template #circleOp="{obj}">
					<view class="solt-op">
						<up-button class="solt-op-but" type="primary" size="mini" text="推荐" @click="onRecommendHandler(obj)"></up-button>
						<up-button class="solt-op-but" type="primary" size="mini" text="跟随" @click="onFollowHandler(obj)"></up-button>
					</view>
				</template>
			</siCircleList>
		</view>
		<view v-else-if="circleTabRef?.choosedTab.name === '追随'">
			追随圈子
		</view>
		<view v-else-if="circleTabRef?.choosedTab.name === '附近'">
			附近圈子
		</view>
		<view v-else>
			选择异常
		</view>
	</view>
	
	
	</scroll-view>
	
	
		
		
		
		
		
		
	<up-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" loadmore="addRandomData"></up-loadmore>
	<!-- </s-layout> -->
</template>

<style lang="scss" scoped>
	.viewport{
		width: auto;
	}
	.circleHead{
		display: flex; 
		flex-direction: row; 
		justify-content: space-between;
		background-color: #ffffff;
	}

	.plant-list{
		width: 100%;
		.solt-op{
			display: flex; 
			flex-direction: row;
			.solt-op-but{
				margin-left: 10rpx;
			}
		}
	}
</style>
